<template>
  <el-container>
      <el-header class="auto"><goback :content="content"></goback></el-header>
    <el-main>
      <el-tabs type="border-card" v-model="tab" @tab-click="handleClick">
        <el-tab-pane>
          <span slot="label" name="0">新建用户</span>
          <addStaff></addStaff>
        </el-tab-pane>

        <el-tab-pane>
          <span slot="label" name="1">用户管理</span>
          <manageStaff @changeTab="changeTab"></manageStaff>
        </el-tab-pane>

        <el-tab-pane>
          <span slot="label" name="2">新建档案</span>
          <addRecord ref="addRecord"></addRecord>
        </el-tab-pane>

<!--        <el-tab-pane>-->
<!--          <span slot="label" name="3">档案管理</span>-->
<!--          <manageRecord></manageRecord>-->
<!--        </el-tab-pane>-->

        <el-tab-pane>
          <span slot="label" name="4">权限管理</span>
          <manageAuth></manageAuth>
        </el-tab-pane>

        <el-tab-pane>
          <span slot="label" name="5">模块管理</span>
          <manageModel></manageModel>
        </el-tab-pane>
      </el-tabs>
    </el-main>

  </el-container>
</template>

<script>
    import goback from "../common/goback";
    import {mapActions} from "vuex"
    //一件引入文件夹下所有组件
    // const allComponents = require.context("./children", true, /\.vue$/);
    // let res_components = {};
    // allComponents.keys().forEach((item) => {
    //     let comp = allComponents(item);
    //     let name = comp.default.name;
    //     res_components[name] = comp.default;
    // });

    import addStaff from "./children/addStaff";
    import addRecord from "./children/addRecord";
    import manageAuth from "./children/manageAuth";
    import manageStaff from "./children/manageStaff";
    import manageModel from "./children/manageModel";

    export default {
        name: "personnel",
        data(){
            return {
                content: '人事',
                tab: '0',
            }
        },
        components: {addStaff,goback,addRecord,manageAuth,manageStaff,manageModel},
        methods: {
            ...mapActions("SetUser",["getAccountListActions"]),
            ...mapActions("Common",["getAuthListActions","getModelListActions","getCommonActions"]),
            handleClick(tab,event){
                const {index} = tab
                console.log('-----------',index)
                if (index === '1') {
                    this.getAccountListActions({username: '',state: '',account: '',page: 1,pageSize: 1000})
                } else if(index == '3'){
                    this.getAuthListActions()
                }else if(index == '4'){
                    this.getModelListActions()
                }else {
                    //todo
                }
            },
            changeTab(uid){
                this.tab = '2'
                this.$refs.addRecord.form.id = uid
                this.$refs.addRecord.getStaffMsg()

            }
        },
        mounted() {
            this.getCommonActions({type: ['position','dept','staff']})
        }
    }
</script>

<style scoped>

</style>
